<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Responsive Tab Menu With Icon</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
		integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
		crossorigin="anonymous" referrerpolicy="no-referrer" />
	<!-- <link rel="stylesheet" href="./all.min.css"
		integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
		crossorigin="anonymous" referrerpolicy="no-referrer" /> -->
	<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
	<ul class="tab">
		<li>
			<a href="#">
				<div class="icon">
					<i class="fa-solid fa-house"></i>
					<i class="fa-solid fa-house"></i>
				</div>
				<div class="text">
					<span data-text="Home">Home</span>
				</div>
			</a>
		</li>
		<li>
			<a href="#">
				<div class="icon">
					<i class="fa-solid fa-user"></i>
					<i class="fa-solid fa-user"></i>
				</div>
				<div class="text">
					<span data-text="Profile">Profile</span>
				</div>
			</a>
		</li>
		<li>
			<a href="#">
				<div class="icon">
					<i class="fa-solid fa-camera"></i>
					<i class="fa-solid fa-camera"></i>
				</div>
				<div class="text">
					<span data-text="Photos">Photos</span>
				</div>
			</a>
		</li>
		<li>
			<a href="#">
				<div class="icon">
					<i class="fa-solid fa-video"></i>
					<i class="fa-solid fa-video"></i>
				</div>
				<div class="text">
					<span data-text="videos">videos</span>
				</div>
			</a>
		</li>
		<li>
			<a href="#">
				<div class="icon">
					<i class="fa-solid fa-gear"></i>
					<i class="fa-solid fa-gear"></i>
				</div>
				<div class="text">
					<span data-text="Settings">Settings</span>
				</div>
			</a>
		</li>
	</ul>
</body>

</html>